<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form :form="form">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']" />
            <a-input v-decorator="['groupId']" />
          </a-form-item>
          <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.name','名称')">
            <a-input
                :placeholder="i18n('form.name','名称','input')"
              v-decorator="['name', {rules: [{required: true, message: i18n('form.name','名称','input')}]}]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="$ti18('rxForm.key','编码')">
            <a-input
              :placeholder="$ti18('rxDecorator.input','请输入') +' ' + $ti18('rxForm.key','编码')"
              v-decorator="['code', {rules: [{required: true, message: $ti18('rxDecorator.input','请输入') +' ' + this.$ti18('rxForm.key','编码')}]}]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.groupName','用户组')">
                <div style="text-align: right;">
                    <a-button-group>
                        <a-button @click="addGroup()" ><my-icon type="iconcommon-add"></my-icon></a-button>
                        <a-button @click="removeGroup()"><my-icon type="icontrash"></my-icon></a-button>
                    </a-button-group>
                </div>

                <a-table :columns="columns"
                         rowKey="groupId"
                         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                         :data-source="groups" :pagination="false">
                </a-table>
          </a-form-item>
          <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.descp','描述')">
            <a-textarea
              :placeholder="i18n('form.descp','描述','input')"
              v-decorator="['descp', {rules: [{required: false, message: i18n('form.descp','描述','input')}]}]"
              :rows="4"
            />
          </a-form-item>
        </a-form>
      </div>
    </rx-layout>
  </rx-dialog>
</template>
<script>
import OsusertypeApi from '@/api/user/org/osUserType'
import { BaseForm, RxDialog,Dialog} from "@lowcode/jpaas-common-lib"
export default {
  name: 'OsUserTypeEdit',
  mixins: [BaseForm],
  components: {
    RxDialog
  },
  data() {
    return {
      visible: false,
      labelCol: { span:5 },
      wrapperCol: { span:16 },
      columns:  [
          {
                title: this.i18n('form.groupName','用户组名'),
                dataIndex: 'groupName',
                key: 'groupName',
          }],
        selectedRowKeys:[],
        groups:[]


    }
  },

  methods: {
   i18n(name,text,key){
          return this.$ti18(name,text,"osUserType",key);
   },
   onload_(data){
       if(data){
           this.groups=data.osUserTypeGroups || [];
       }

   },
   get(id) {
      return OsusertypeApi.get(id)
    },
    save(values) {
      values.osUserTypeGroups=this.groups;
      return OsusertypeApi.save(values)
    },
    addGroup(){
        let self_=this;
        let config={
            curVm: this,
            data:{dimId:'2',showDimId:true},
            widthHeight: ['1000px','600px']
        };
        Dialog.openGroupDialog(config,function(self,data){
            let groups=[];
            for(let i=0;i<data.length;i++){
                let tmp=data[i];
                let ary=self_.groups.filter(item=>{
                    return item.groupId==tmp.groupId;
                })
                if(ary.length==0){
                    groups.push({groupId:tmp.groupId,groupName:tmp.name});
                }
            }
            self_.groups.push(...groups);
        })
    },
    removeGroup(){
        let groups=this.groups;
        for(let i=groups.length-1;i>=0;i--){
            let group=groups[i];
            if(this.selectedRowKeys.includes(group.groupId)){
                groups.splice(i,1);
            }
        }
        this.selectedRowKeys=[];
    },
    onSelectChange(selectedRowKeys) {
          this.selectedRowKeys = selectedRowKeys;
    },
  }
}
</script>
